<template>
  <div class="center-energy-report">
    <dv-loading v-if="loading"></dv-loading>
    <PeakAndvalley
      v-else
      :tableList="tableList"
      :ActualBudgetList="ActualBudgetList"
      :PeakToolList="PeakToolList"
      @CheckYear="checkyear"
      @CheckMonth="checkmonth"
      @ChangeData="changedata"
    />
  </div>
</template>
<script>
import { getYday, getYestoday } from "../../utils/index.js";
import PeakAndvalley from "../../components/peakAndvalley/PeakAndvalley";
import {
  searchPeakValueList,
  searchPeakChart,
  searchPeakTool,
} from "../../api/base8090.js";
import { mapState } from "vuex";
export default {
  name: "peakAndvalleyIndex",
  components: {
    PeakAndvalley,
  },
  created() {
    this.timer = setInterval(() => {
      if (document.readyState === "complete") {
        this.loading = false;
        window.clearInterval(this.timer);
      }
    }, 1000);
    searchPeakTool(this.queryHourlyParmas)
      .then((res) => {
        if (res.code == 200) {
          this.PeakToolList = res.data.source;
        }
      })
      .catch(() => {
        this.$message.error("响应超时，服务异常！");
      });
    this.initData();
  },
  data() {
    return {
      loading: true,
      timer: null,
      tableList: [
        {
          time: "2023-03-01",
          top: "--",
          high: "--",
          low: "150.00",
          middle: "--",
          sum: 150.0,
        },
        {
          time: "2023-03-02",
          top: "--",
          high: "--",
          low: "100.00",
          middle: "--",
          sum: 100.0,
        },
        {
          time: "2023-03-03",
          top: "--",
          high: "--",
          low: "180.00",
          middle: "--",
          sum: 180.0,
        },
      ],
      ActualBudgetList: {
        sum: 430.0,
        values: { middle: 0.0, high: 0.0, top: 0.0, low: 430.0 },
      },

      PeakToolList: [
        [10, 78254, "23:00-7:00"],
        [10, 41032, "21:00-23:00"],
        [50, 12755, "19:00-21:00"],
        [90, 20145, "16:30-19:00"],
        [90, 79146, "14:00-16:30"],
        [50, 91852, "11:30-14:00"],
        [10, 101852, "9:00-11:30"],
        [50, 20112, "7:00-9:00"],
      ],
      queryParmas: {
        stationCode: sessionStorage.getItem("stationCode"),
        month: getYday(),
      },
      queryHourlyParmas: {
        stationCode: sessionStorage.getItem("stationCode"),
        date: getYestoday(),
      },
    };
  },
  methods: {
    initData() {
      this.tableList = [];
      this.ActualBudgetList = {};
      this.PeakToolList = [];

      searchPeakValueList(this.queryParmas)
        .then((res) => {
          if (res.code == 200) {
            this.tableList = res.data;
          }
        })
        .catch(() => {
          this.$message.error("响应超时，服务异常！");
        });

      searchPeakChart(this.queryParmas)
        .then((res) => {
          if (res.code == 200) {
            this.ActualBudgetList = res.data;
          }
        })
        .catch(() => {
          this.$message.error("响应超时，服务异常！");
        });
    },
    checkyear(year) {
      this.queryParmas.month = year;
      console.log(this.queryParmas);
      this.initData();
    },
    checkmonth(month) {
      this.queryParmas.month = month;
      console.log(this.queryParmas);
      this.initData();
    },
    changedata(date) {
      this.queryHourlyParmas.date = date;
      searchPeakTool(this.queryHourlyParmas)
        .then((res) => {
          if (res.code == 200) {
            this.PeakToolList = res.data.source;
          }
        })
        .catch(() => {
          this.$message.error("响应超时，服务异常！");
        });
    },
  },
  computed: {
    ...mapState(["stationCode"]),
  },
  watch: {
    stationCode(newVal, oldVal) {
      if (newVal != oldVal) {
        this.queryParmas.stationCode = newVal;
        this.queryHourlyParmas.stationCode = newVal;
        searchPeakTool(this.queryHourlyParmas)
          .then((res) => {
            if (res.code == 200) {
              this.PeakToolList = res.data.source;
            }
          })
          .catch(() => {
            this.$message.error("响应超时，服务异常！");
          });
        this.initData();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.center-energy-report {
  width: 100%;
  height: 100%;
}
</style>
